<template>
    <div class="detail-form" v-if="loadingFinish" >
    <Form :model="formInfo" ref="formInfo" class="ivu-form-no-margin-bottom form" :rules="rule" :label-width="120">
        <Row :gutter="32" class="code-row-bg">
            <Col span="8" style="border: none">
                <FormItem prop="addressCode" label="地址代码">
                    <Input v-model="formInfo.addressCode" :maxlength="50"  
                        placeholder="请输入地址代码" clearable>
                    </Input>
                </FormItem>
            </Col>
            <Col span="8" style="border: none">
                <FormItem prop="addressName" label="地址名称">
                    <Input v-model="formInfo.addressName" :maxlength="50"  
                        placeholder="请输入地址名称" clearable>
                    </Input>
                </FormItem>
            </Col>
            <Col span="8" style="border: none">
                <FormItem prop="addressEn" label="地址英文">
                    <Input v-model="formInfo.addressEn" :maxlength="50"  
                        placeholder="请输入地址英文" clearable>
                    </Input>
                </FormItem>
            </Col>
            <Col span="8" style="border: none">
                <FormItem prop="country" label="国家">
                    <Input v-model="formInfo.country" :maxlength="50"  
                        placeholder="请输入国家" clearable>
                    </Input>
                </FormItem>
            </Col>
            <Col span="8" style="border: none">
                <FormItem prop="province" label="地址省份">
                    <Input v-model="formInfo.province" :maxlength="50"  
                        placeholder="请输入地址省份" clearable>
                    </Input>
                </FormItem>
            </Col>
            <Col span="8" style="border: none">
                <FormItem prop="city" label="城市">
                    <Input v-model="formInfo.city" :maxlength="50"  
                        placeholder="请输入城市" clearable>
                    </Input>
                </FormItem>
            </Col>
            <Col span="8" style="border: none">
                <FormItem prop="county" label="区县">
                    <Input v-model="formInfo.county" :maxlength="50"  
                        placeholder="请输入区县" clearable>
                    </Input>
                </FormItem>
            </Col>
        </Row> 
    </Form>
    </div>
</template>
<script>
  import { apiTrainCityAdd } from '@api/trip/standard/trainCity.js'
  import debounce from "lodash/debounce";
  export default {
    name: 'trip-train-city-manager-detail',
    components: { 
    },
    props: { 
        TrainCity: {
        type: Object, 
      },
    
    },
    data() { 
      return { 
        loadingFinish:false, 
        formInfo: { 
            id:'',
            addressCode: '', //地址代码
            addressName: '', //地址名称
            addressEn: '', //地址英文
            country: '', //国家
            province: '', //省份
            city: '', //城市
            county: '', //区县  
        },
        rule: {
            addressCode: [{ required: true, message: '请输入地址代码', trigger: 'blur' }], 
            addressName: [{ required: true, message: '请输入地址名称', trigger: 'blur' }], 
            addressEn: [{ required: true, message: '请输入地址英文', trigger: 'blur' }], 
            country: [{ required: true, message: '请输入国家', trigger: 'blur' }], 
            province: [{ required: true, message: '请输入省份', trigger: 'blur' }],            
        },
        actions: [
          {
            /**
              text: "按钮label",
              theme: "warning",
              icon: "plus-round",
              action: "actionName1", //可以通过 SetActionsState  actionName1 的 state 来设置这个按钮是否 loading
          */
            text: this.$t('common.save'),
            theme: 'primary',
            action:"save",
            handle: debounce(()=>this.handleSave(),300),
            loading: false
          },
          {
            text: this.$t('common.close'),
            handle: () => {
              this.$emit('Close')
            }
          }
        ],
      }
    },
    computed: { 
    },
    created: function() {
      this.$Spin.show({
          render: (h) => {
              return h('div', [
                  h('Icon', {
                      'class': 'spin-icon-load',
                      props: {
                          type: 'ios-loading',
                          size: 18
                      }
                  }),
                  h('div', '加载中...')
              ])
          }
      });
      //#region  sidelipPage 配置
      if (this?.TrainCity?.id) {
        this.$emit('SetTitle', '编辑火车城市')
      } else {
        this.$emit('SetTitle', '新增火车城市')
      }
      this.$emit('SetPageWidth', 700)
      this.$emit('SetPageActions', this.actions)
      //#endregion
      this.init() 
    },
    mounted: function() {},
    methods: {  
      init() { 
        console.log('this.TrainCity :>> ', this.TrainCity);
        if (this?.TrainCity?.id) {
           this.formInfo = Object.assign({},this.TrainCity);
        }
        this.$Spin.hide();
        this.loadingFinish = true;  
      },
      handleSave() {
        this.$refs['formInfo'].validate(valid => {
          if (valid) {
            this.actions[0].loading = true
            let param = this.formInfo
            apiTrainCityAdd(param)
            .then(data => {
                console.log('保存失败 :>> ', data);
                this.actions[0].loading = false
                if (data.code === "0") {
                this.$message.success({
                    content: '保存成功',
                    duration: 3
                });
                this.$emit('Close', true); 
                } else {
                this.$message.error({
                    content: data.message || "保存失败",
                    duration: 3
                });
                }  
            })
            .catch(data => {
            this.actions[0].loading = false 
            })
          }
        })
      },
    }
  }
  </script>
  <style scoped lang="less">
  .detail-form {
    background: #f4f6fd;
    .form {
      background: #fff;
      padding: 24px 24px 12px 24px;
      .ivu-row {
        margin-bottom: 0px;
        .last-item {
          margin-bottom: 0px;
        }
      }
      .form-title {
        display: block;
        font-size: 16px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 600;
      }
    }
  }
  </style>
</script>